// 获取一级菜单
let menuOne = document.querySelectorAll('.menuOne > li');
// querySelectorAll获取出来是类数组，这里的操作是将类数组转为数组
menuOne = [...menuOne];
// 定义一个存放下标的变量
let menuIndex = NaN;
// 遍历给每一个元素添加点击事件
menuOne.forEach((item, index) => {
	// 将下标绑定在元素对象上
	item.index = index;
	// 绑定点击事件
	item.onclick = function () {
		// 获取二级菜单 => ul
		const menuTwo = this.lastElementChild;
		// 获取二级菜单的每一项 => ul>li
		const menu = menuTwo.children;
		// 获取二级菜单的高度 通过高度判断是否是展开状态
		const menuTwoHeight = menuTwo.offsetHeight;
		// console.log('%c ======>>>>>>>>','color:orange;',menuTwoHeight)

		// 是否是首次展开菜单
		if (isNaN(menuIndex)) {
			// 展开菜单
			menuTwo.style.height = menu.length * 41 + 'px'; // 假设子菜单每个高度为40(有个border-bottom 1px)所以是41
			// menuIndex重新赋值当前下标
			menuIndex = this.index;
			// 结束 后续代码不执行
			return false;
		}

		/**
		 * menuIndex  => 上一次展开的下标
		 * this.index => 当前点击的下标
		 * 当menuIndex不等于this.index（当前下标）时说明已有展开项
		 */
		if (menuIndex != this.index) {
			// 获取上一次展开的菜单也就是那个 “ul” 标签
			const lastMenu = menuOne[menuIndex].lastElementChild
			// 将上一次展开的关闭
			lastMenu.style.height = 0;
			// 展开当前的菜单
			menuTwo.style.height = menu.length * 41 + 'px'; // 假设子菜单每个高度为40(有个border-bottom 1px)所以是41
		}
		/**
		 * menuIndex等于this.index时说明用户点击的是同一个菜单
		 */
		else {
			/**
			 * 0   => 未展开状态
			 * !=0 => 已展开状态
			 * !menuTwoHeight => !0 === true 0取反等于true进入if
			 */
			if (!menuTwoHeight) {
				// 展开
				menuTwo.style.height = menu.length * 41 + 'px'; // 假设子菜单每个高度为40(有个border-bottom 1px)所以是41
			} else {
				// 收起
				menuTwo.style.height = 0
			}
		}
		// menuIndex重新赋值当前下标
		menuIndex = this.index;
	}
});